<template>
  <div class="Login_container">
      <div class="login_box">
          <div class="avator_box">
              <img src="../assets/logo.png" alt="">
          </div>
          <el-form class="login_form" label-width="0" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
            <el-form-item label-width="0" prop="username">
                <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item label-width="0" prop="password">
                <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>

            <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
export default {
    name:'Login',
    data(){
      return {
        loginForm:{
          username:'',
          password:''
        },
        loginFormRules:{
          username:[
            {required:true, message: '请输入用户名', trigger: 'blur'},
            {min:3, max:10, message:'用户名3-10个字符之间', trigger:'blur'}
          ],
          password:[
            {required:true,message: '请输入密码', trigger: 'blur'},
          ]
        }
      }
    },
    methods:{
      resetForm(){
        this.$refs.loginFormRef.resetFields()
      },
      login(){
        this.$refs.loginFormRef.validate(async valid=>{
          if(!valid) return;
          const {data:res}= await this.$http.post('login',this.loginForm)
          if(res.meta.status !== 200) return this.$message.error('登录失败！')
          this.$message.success('登录成功')
          window.sessionStorage.setItem('token',res.data.token)
          this.$router.push('/Home')
        })
      }
    }
}
</script>

<style lang="less" scoped>
    .Login_container{
        background-color: #2b4b6b;
        height: 100%;
    }
    .login_box{
        width:450px;
        height: 300px;
        background-color:#fff;
        border-radius: 3px 3px;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);

        .avator_box{
            height: 130px;
            width:130px;
            border:1px solid #eee;
            border-radius: 50%;
            padding:10px;
            box-shadow: 0 0 10px #ddd;
            position: relative;
            left:50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
    }
    .login_form{
      position:absolute;
      bottom: 0px;
      width: 100%;
      padding:0px 20px;
      box-sizing: border-box;
    }
    .btns{
      display: flex;
      justify-content: flex-end;
    }
</style>